<template>
  <div class="dog-detail-page">
    <el-page-header @back="goBack" content="狗狗详情"></el-page-header>
    <DogDetail v-if="dogId" :dogId="dogId" @refresh-list="handleRefreshList" />
    <el-empty v-else description="未找到狗狗信息"></el-empty>
  </div>
</template>

<script>
import DogDetail from '@/components/DogDetail.vue'

export default {
  name: 'DogDetailPage',
  components: {
    DogDetail
  },
  data() {
    return {
      dogId: null
    }
  },
  created() {
    this.dogId = this.$route.params.id
  },
  methods: {
    goBack() {
      this.$router.go(-1)
    },
    handleRefreshList() {
      // Optionally, emit an event or refresh data in a parent component if needed
      console.log('Dog list needs to be refreshed.')
    }
  },
  watch: {
    '$route.params.id': {
      handler(newId) {
        this.dogId = newId
      },
      immediate: true
    }
  }
}
</script>

<style scoped>
.dog-detail-page {
  padding: 20px;
  /* max-width: 1200px; */ /* Removed to allow full width */
  /* margin: 0 auto; */ /* Removed as it's not needed without max-width */
}

.el-page-header {
  margin-bottom: 20px;
}
</style>
